The line chart from the front page(grayscale version) (an old version of the front page)

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="400" height="200">
    [No canvas support]
</canvas>

This is the code that generates the chart:

    window.onload = function ()
    {
        var data1 = [4,6,12,16,8,4,2,8,18,16,14,16];
        var data2 = [2,4,8,4,2,6,6,12,8,10,6,8];

        var myLine = new RGraph.Line({
            id: 'cvs',
            data: [data1, data2],
            options: {
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                tickmarks: null,
                gutterLeft: 40,
                gutterRight: 15,
                gutterBottom: 30,
                colors: ['#ff0', 'pink'],
                unitsPost: '%',
                linewidth: 5,
                hmargin: 15,
                textColor: '#333',
                textFont: 'Arial',
                shadow: false,
                backgroundGridAutofitNumvlines: 11,
                backgroundGridVlines: false,
                backgroundGridBorder: true,
                noxaxis: true,
                title: 'An example Line chart',
                axisColor: '#666',
                textColor: '#666',
                spline: true,
                textAccessible: true
            }
        }).on('draw', function (obj)
        {
            var pixels = obj.context.getImageData(0,0,obj.canvas.width,obj.canvas.height);

            for (var i=0,len=pixels.data.length; i<len; i+=4) {
                
                var avg = (pixels.data[i] + pixels.data[i + 1] + pixels.data[i + 2]) / 3;

                pixels.data[i] = avg;
                pixels.data[i + 1] = avg;
                pixels.data[i + 2] = avg;
            }

            obj.context.putImageData(pixels, 0, 0);
        }).draw();

        /**
        * Use the Trace animation to show the chart
        */
        myLine.set({
            tooltips: [
                'January
Started off the year quite averagely',
                'February
Better than January, rising quite nicely',
                'March
March was quite a spike',
                'April
Rising very impressively',
                'May
Dropping after the last two month spike',
                'June
Still dropping',
                'July
The fall is beginning to subside, but still dropping',
                'August
A good rise after the fall',
                'September
A very good peak',
                'October
The peak is now subsiding',
                'November
Still subsiding',
                'December
Rising again after the last fall',
                
                
                'January
Started off the year quite averagely as with Robert',
                'February
Rising as with Robert',
                'March
Not as good as Robert, but OK',
                'April
Dropping after the peak',
                'May
The low point as with last year',
                'June
Rising higher than Robert',
                'July
Consistent with last month',
                'August
A nice high point',
                'September
A low point',
                'October
A nice rise',
                'November
Falling for fall...',
                'December
Rising again for Christmas'
            ]
        })
        .trace2();
    };
</script>